<template>
	<view @touchstart="handleTouchstart" @touchend="handleTouchend">
		
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 按下的坐标
				startX:0,
				startY:0,
				// 按下的时间
				startTime:0
			}
		},
		methods: {
			handleTouchstart(event){
				// console.log('手指按下屏幕');
				// console.log('按下x',event.changedTouches[0].clientX);
				// console.log('按下y',event.changedTouches[0].clientY);
				// 记录按下的时间
				this.startTime = Date.now()
				// 记录按下的x和y坐标
				this.startX = event.changedTouches[0].clientX
				this.startY = event.changedTouches[0].clientY
				
			},
			handleTouchend(event){
				// console.log('手指离开屏幕');
				// console.log('离开x',event.changedTouches[0].clientX);
				// console.log('离开y',event.changedTouches[0].clientY);
				// 记录离开的时间
				const endTime = Date.now()
				// 记录离开的坐标
				const endX = event.changedTouches[0].clientX
				const endY = event.changedTouches[0].clientY
				// 判断按下的时长
				if(endTime - this.startTime >2000){
					return
				}
				
				// 声明一个变量来存储滑动的方向
				let direction = ""
				// 判断用户滑动的距离是否合法,合法就判断滑动的方向,注意:距离要加上绝对值
				if(Math.abs(endX-this.startX)>10&& Math.abs(endY-this.startY)<10){
					direction = endX - this.startX>0?"right":"left"
				}else{
					// 轻微滑动无效
					return
				}
				
				// console.log('滑动的方向',direction)
				this.$emit("swiperAction",{direction})
				
			}
		}
	}
	
</script>

<style>

</style>
